<template>
	<el-container ref="container" class="home-container">
		<el-header>
			<header-content :is-full="isFullscreen" @toggle-full-screen="toggle"></header-content>
		</el-header>
		<el-container>
			<el-aside :width="globalStore.isLeftCollapse ? '400px' : '0px'">
				<left-menu />
			</el-aside>
			<el-main>
				<main-content />
			</el-main>
			<el-aside :width="globalStore.isRightCollapse ? '400px' : '0px'">
				<right-menu />
			</el-aside>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
import LeftMenu from './components/left-menu/index.vue'
import MainContent from './components/main-content/index.vue'
import RightMenu from './components/right-menu/index.vue'
import HeaderContent from './components/header-content/index.vue'
import { useGlobalStore } from '@/store/global.ts'
import { useFullscreen } from '@vueuse/core'
import { ref } from 'vue'

const container = ref<HTMLElement | null>(null)

const { isFullscreen, toggle } = useFullscreen(container)

const globalStore = useGlobalStore()
</script>

<style lang="scss" scoped>
.home-container {
	height: 100%;
	overflow: hidden;

	.el-header {
		background-color: #21242a;
		color: #ffffff;
		text-align: center;
		border-bottom: 1px solid #12191f;
	}

	.el-container {
		height: 100%;

		.el-aside {
			background-color: #21242b;
			color: #333;
			border-right: 1px solid #12191f;
		}

		.el-main {
			background-color: #010010;
			color: #333;
			padding: 0;
			height: 100%;
		}
	}
}
</style>
